<template>
  <div class="anteque">
    <div class="anteque-header">
      <div class="anteque-left">
        <i class="el-icon-info"></i>
        <span>Anteque (AQ)</span>
      </div>
      <div class="anteque-right">
        <el-button type="primary" icon="el-icon-upload" @click="receiveClick">RECEIVE</el-button>
        <el-button type="danger" icon="el-icon-download" @click="sendClick">SEND</el-button>
      </div>
    </div>
    <quotationLine :anTether="antequeLine" @cycChartClick="cycChartClick"/>
    <div class="account-details">
      <h2>History</h2>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane
          v-for="item in activList"
          :key="item.name"
          :label="item.label"
          :name="item.name"
        >
          <component :is="comName" :listData="listData"></component>
        </el-tab-pane>
      </el-tabs>
    </div>
    <receiveDialog :receive="receiveContent" />
    <sendDialog :send="sendContent" />
  </div>
</template>

<script>
import { mapActions } from "vuex";
import sendDialog from "./components/sendDialog.vue";
import allHistory from "./components/allHistory.vue";
import deposit from "./components/depositHistory.vue";
import withdrawal from "./components/withdrawalHistory.vue";
import quotationLine from "./components/quotationLine.vue";
import receiveDialog from "./components/receiveDialog.vue";
import { txList, walletAddress, assetList, totalbalance} from '@/api/assets'
export default {
  name: 'anteque',
  data() {
    return {
      isChart: "week",
      activeName: "allHistory",
      comName: "allHistory",
      dateType: "week",
      antequeLine: {
        title: '',
        usd: '',
        show: true,
        linedata: {
          x:[],
          y:[]
        },
        color: '#FFE8A5'
      },
      listData: [],
      activList: [
        {
          label: "All History",
          name: "allHistory"
        },
        // {
        //   label: "Deposit History",
        //   name: "deposit"
        // },
        // {
        //   label: "Withdrawal History",
        //   name: "withdrawal"
        // }
      ],
      receiveContent: {
        dialogVisible: false,
        icon: "el-icon-coin",
        rsContnt: "AQ",
        color: "#FFD14B",
        address: "",
        details: "Send only AQ to this deposit address."
      },
      sendContent: {
        available: 0,
        frozen: 0,
        rate: 0,
        dialogVisible: false
      }
    };
  },
  components: {
    allHistory,
    deposit,
    withdrawal,
    quotationLine,
    sendDialog,
    receiveDialog
  },
  created() {
    this.orLogin(true);
    this.antequeList();
    this.totalbalance()
  },
  methods: {
    ...mapActions(["orLogin"]),
    /**
     * [totalbalance description]
     * 折线数据
     * ---------------------------
     * @Author   LLP
     * @DateTime 2019-12-27T11:51:52+0800
     * @return   {[type]}                 [description]
     */
    async totalbalance() {
      let param = {
        type: this.dateType,
      }
      this.antequeLine.linedata.x = []
      this.antequeLine.linedata.y = []
      let { data } = await totalbalance(param) 
      if (data.AssertList) {
        for (let item of data.AssertList) {
          this.antequeLine.linedata.x.push(item.date)
          this.antequeLine.linedata.y.push(item.usdt_token)
        }
      }
    },
    /**
     * @name: 交易列表
     * ---------------
     * @test: test font
     * @msg: 
     * @param {type} 
     * @return: 
     */
    async antequeList() {
      let param = {
        token_type: 1000,
        type: 'all'
      }
      let {data} = await txList(param)
      if (data) {
        this.listData = data
      }
    },
    /**
     * [walletAddress description]
     * 获取二维码地址
     * --------------------------------
     * @Author   LLP
     * @DateTime 2019-12-20T17:10:12+0800
     * @return   {[type]}                 [description]
     */
    async walletAddress() {
      let param = {
        coin_type: 1000
      }
      let {data} = await walletAddress(param)
      if (data) {
        this.receiveContent.address = data
        this.receiveContent.dialogVisible = true;
      }
    },
    /**
     * @name: 用户详情
     * ----------------
     * @test: test font
     * @msg: 
     * @param {type} 
     * @return: 
     */
    async assetListIifo() {
      const {data} = await assetList()
      if (data) {
        this.sendContent.dialogVisible = true
        this.sendContent.rate = data.aq_rate_usd
        this.sendContent.frozen = data.assert_avaliable_aq
        this.sendContent.available = data.assert_avaliable_aq
        this.antequeLine.usd = `AQ ${data.assert_frozen_aq + data.assert_avaliable_aq}`
        this.antequeLine.title = `USDT ${data.assert_frozen_usdt + data.assert_avaliable_usdt}`
      }
    },
    handleClick() {
      this.comName = this.activeName;
    },
    cycChartClick(name) {
      this.dateType = name.toLowerCase()
      this.totalbalance()
    },
    receiveClick() {
      this.walletAddress()
    },
    /**
     * @name: send 弹框
     * ---------------
     * @test: test font
     * @msg: 
     * @param {type} 
     * @return: 
     */
    sendClick() {
      this.assetListIifo()
    }
  }
};
</script>

<style lang="less" scoped>
.anteque {
  .anteque-header {
    padding: 0 35px 50px 0;
    .anteque-left {
      display: inline-block;
      font-size: 26px;
      font-weight: 600;
      span {
        padding-left: 10px;
        display: inline-block;
      }
    }
    .anteque-right {
      display: inline-block;
      float: right;
      .el-button {
        width: 120px;
      }
    }
  }
  .account-details {
    h2 {
      font-size: 28px;
      margin: 20px auto;
    }
    .el-tabs {
      background: #ffffff;
      padding: 20px 60px 20px 30px;
    }
  }
}
</style>


